<template>
  <div>
    <Button disabled type="primary"  @click="selectData">编辑</Button>
    <Drawer
        title="编辑项目"
        v-model="value"
        width="700"
        :mask-closable="true"
        :styles="styles">
      <Form :model="formData">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="平台名称" label-position="top">
              <Input v-model="formData.EnvName" placeholder="输入平台名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="jenkins地址" label-position="top">
              <Input v-model="formData.JenkinsAddress" placeholder="输入jenkins地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="jenkins用户" label-position="top">
              <Input v-model="formData.JenkinsUser" placeholder="输入jenkins用户" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="jenkins密码" label-position="top">
              <Input v-model="formData.JenkinsPassword" placeholder="输入jenkins密码" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Dubbo监控" label-position="top">
              <Input v-model="formData.DubboAddress" placeholder="输入Dubbo监控地址" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Dubbo账号" label-position="top">
              <Input v-model="formData.DubboUser" placeholder="输入Dubbo监控账号" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Dubbo密码" label-position="top">
              <Input v-model="formData.DubboPassword" placeholder="输入Dubbo监控密码" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Rancher地址" label-position="top">
              <Input v-model="formData.RancherAddress" placeholder="输入Rancher地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="eureka地址" label-position="top">
              <Input v-model="formData.EurekaAddress" placeholder="输入eureka地址" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="eureka账号" label-position="top">
              <Input v-model="formData.EurekaUser" placeholder="输入eureka账号" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="eureka密码" label-position="top">
              <Input v-model="formData.EurekaPassword" placeholder="输入eureka密码" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Rocketmq监控" label-position="top">
              <Input v-model="formData.RocketmqAddress" placeholder="输入Rocketmq地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Rocketmq账号" label-position="top">
              <Input v-model="formData.RocketmqUser" placeholder="输入Rocketmq用户" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Rocketmq密码" label-position="top">
              <Input v-model="formData.RocketmqPassword" placeholder="输入Rocketmq密码" />
            </FormItem>
          </Col>
        </Row>

      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="value = false;">取消</Button>
        <!--      <Button type="primary" @click="value = false;background('success')">确定</Button>-->
        <Button type="primary" @click="saveSelectData">确定</Button>


      </div>
    </Drawer>
  </div>
</template>
<script>

import axios from "axios";

export default {
  name: 'EditTable',
  props: ['id'],
  inject:['reload'],
  data () {
    return {
      value: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        EnvName: '',
        JenkinsAddress: '',
        JenkinsUser: '',
        JenkinsPassword: '',
        DubboAddress: '',
        DubboUser: '',
        DubboPassword: '',
        RancherAddress: '',
        EurekaAddress: '',
        EurekaUser: '',
        EurekaPassword: '',
        RocketmqAddress: '',
        RocketmqUser: '',
        RocketmqPassword: '',
        Resolv:'',
      },
    }
  },
  methods: {
    saveSelectData(){
      axios.post(`http://172.30.53.223:8888/api/savedata?id=${this.id}`,this.formData)
          .then(response => {
            this.$Message.success({ background: true, content: '保存成功' });
            console.log(response.data); // 根据后端返回的结果进行相应的处理
            this.reload()
          })
          .catch(error => {
            // 请求失败处理
            console.error(error); // 处理错误情况
            this.$Message.error({ background: true, content: '保存失败' });
          });
      this.value=false
    },
    selectData(){
      axios.get(`http://172.30.53.223:8888/api/select/port?id=${this.id}`)
          .then(response => {
            // 在请求成功的回调函数中处理返回的数据
            this.formData.EnvName = response.data.item.EnvName
            this.formData.JenkinsAddress = response.data.item.JenkinsAddress;
            this.formData.JenkinsUser = response.data.item.JenkinsUser;
            this.formData.JenkinsPassword = response.data.item.JenkinsPassword;
            this.formData.DubboAddress = response.data.item.DubboAddress;
            this.formData.DubboUser = response.data.item.DubboUser;
            this.formData.DubboPassword = response.data.item.DubboPassword;
            this.formData.RancherAddress = response.data.item.RancherAddress;
            this.formData.EurekaAddress = response.data.item.EurekaAddress;
            this.formData.EurekaUser = response.data.item.EurekaUser;
            this.formData.EurekaPassword = response.data.item.EurekaPassword;
            this.formData.RocketmqAddress = response.data.item.RocketmqAddress;
            this.formData.RocketmqUser = response.data.item.RocketmqUser;
            this.formData.RocketmqPassword = response.data.item.RocketmqPassword;
            this.value=true

          }).catch(error => {
        // 请求发生错误时的处理
        console.log(error);
      });
    },
    background (type) {
      this.$Message[type]({
        background: true,
        content: '编辑成功'
      });
    },
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
